import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
	Row,
	Col,
	Card,
	Form,
	Input,
	Select,
	Button,
	Modal,
	Avatar,
	message,
	Badge,
	Radio,
	Upload,
	Icon,
} from 'antd';

import { imgPrex } from '../../utils/constData';

const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;

@Form.create()
export default class AuthorModal extends PureComponent {
	constructor(props) {
		super(props);

		console.log('初始化数据', this.props.initValue)

		this.state = {
			fileList: [],
			file: null,
		};

		this.formLayout = {
			labelCol: { span: 7 },
			wrapperCol: { span: 13 },
		};
	}

	_onRemove(file) {
		this.setState(({ fileList }) => {
			const index = fileList.indexOf(file);
			const newFileList = fileList.slice();
			newFileList.splice(index, 1);
			return {
				fileList: newFileList,
			};
		});
		this.props.form.setFieldsValue({ name: (this.props.record && this.props.record.authorImg) ? this.props.record.authorImg : null })
	}

	_beforeUpload(file) {
		const isLt1M = file.size / 1024 / 1024 < 1;
		if (!isLt1M) {
			message.error('图片大小不能超过1M');
			return false;
		}
		this.setState(({ fileList }) => ({
			fileList: [file],
			file: file,
			image: null,
		}));
		this.props.form.setFieldsValue({
			name: file
		});

		return false;
	}

	normFile = (e) => {
		const isLt1M = e.file.size / 1024 / 1024 < 1;
		if (!isLt1M) {
			this.setState({ fileList: [], file: null })
			return (this.props.record && this.props.record.authorImg) ? this.props.record.authorImg : null;
		}

		if (e.fileList && e.fileList.length > 0) {
			return e && e.file;
		} else {
			return null;
		}
	}


	_okHandle() {
		this.props.form.validateFields((err, fieldsValue) => {
			if (err) return;
			const values = {
				...fieldsValue,
				name: this.state.file,
			}
			this.props.addAuthor(values);
			// form.resetFields();
		});
	}

	render() {
		const { form, record } = this.props;
		return (
			<Modal
				title={record ? '编辑作者' : '新增作者'}
				destroyOnClose
				visible={this.props.visible}
				onOk={() => this._okHandle()}
				onCancel={() => this.props.setModalVisible(false)}
				afterClose={() => this.setState({ fileList: [], file: null })}
				confirmLoading={this.props.loading}
			>
				{
					record ?
						<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="authorId" style={{ display: 'none' }}>
							{form.getFieldDecorator('authorId', {
								initialValue: record ? ('' + record.authorId) : '',
								// rules: [{ required: true, message: 'id' }],
							})(
								<Input hidden={true} placeholder="authorId" />
							)}
						</FormItem>
						:
						null
				}

				<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="头像">
					{
						form.getFieldDecorator('name', {
							valuePropName: 'file',
							getValueFromEvent: this.normFile,
							rules: [{ required: true, message: '头像不能为空' }],
							initialValue: record ? record.authorImg : null,
						})
							(<Upload
								onRemove={(file) => this._onRemove(file)}
								beforeUpload={(file) => this._beforeUpload(file)}
								fileList={this.state.fileList}
							>
								<Button>
									<Icon type="upload" />浏览
         			  </Button>
							</Upload>)}
					{(record && record.authorImg && !(this.state.fileList && (this.state.fileList.length > 0))) ?
						<img src={imgPrex + record.authorImg} style={{ width: 50 }} />
						:
						null
					}
				</FormItem>
				<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="名称">
					{form.getFieldDecorator('authorName', {
						initialValue: record ? record.authorName : null,
						rules: [{ required: true, message: '请输入作者名称' }],
					})(<Input placeholder="请输入作者名称(10字以内)" maxLength="10" />)}
				</FormItem>

				<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="状态">
					{form.getFieldDecorator('authorSts', {
						initialValue: record ? record.authorSts : '0',
						rules: [{ required: true, message: 'Please input some description...' }],
					})(
						<RadioGroup>
							<RadioButton value="0">正常</RadioButton>
							<RadioButton value="1">冻结</RadioButton>
						</RadioGroup>
					)}
				</FormItem>
				<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="介绍">
					{form.getFieldDecorator('authorIntr', {
						initialValue: record ? record.authorIntr : null,
						rules: [{ required: true, message: '请输入作者介绍' }],
					})(<TextArea rows={4} placeholder="请输入作者介绍(300字内)" maxLength="300" />)}
				</FormItem>
			</Modal>
		);
	}
}